<template>
  <div class="equipment-container">
    <!-- 页面头部 -->
    <!-- <div class="page-header">
      <div class="header-title">
        <i class="el-icon-s-management"></i>
        <span>设备接收管理系统</span>
      </div>
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增接收</el-button>
    </div>-->
    <div class="out full_h">
      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="search-group">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索接收编号、设备名称..."
            prefix-icon="el-icon-search"
            class="search-input"
            clearable
          ></el-input>
          <el-select v-model="filterStatus" placeholder="状态筛选" clearable>
            <el-option label="完成接收" value="completed"></el-option>
            <el-option label="待接收" value="pending"></el-option>
            <el-option label="接收中" value="processing"></el-option>
          </el-select>
        </div>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <!-- <el-button type="primary"  @click="handleAddReceive"></el-button> -->
      </div>

      <!-- 表格区域 -->
      <div style="height: calc(100% - 82px); box-sizing: border-box" class="table-container">
        <div class="table-header">
          <div class="table-title">
            <i class="el-icon-document"></i>
            <span>接收记录列表</span>
          </div>
          <div class="table-actions">
            <el-button icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
            <el-button icon="el-icon-plus" @click="handleExport">新增接收</el-button>
          </div>
        </div>
        <!-- <div
          class
          style="overflow-y:auto;height: calc(100% - 82px);box-sizing: border-box;padding: 15px;
}"
        >
          bis quam ab culpa ipsam explicabo rerum minus praesentium, voluptates sed voluptatibus possimus eligendi dolores distinctio a. Amet recusandae nostrum cum sint commodi at.
          Suscipit, accusamus? Voluptate provident porro, earum eos autem deserunt soluta iure ab rem corrupti aspernatur optio magni dignissimos assumenda quias officiis deserunt esse saepe in impedit quam hic. Sed?
          lorem*100
        </div>-->
        <div
          class="table-area"
          style="overflow-y:hidden;height: calc(100% - 82px - 75px);box-sizing: border-box;padding: 15px;
}"
        >
          <el-table
            :data="[...tableData, ...tableData, ...tableData, ...tableData]"
            stripe
            style="width: 100%"
            height="100%"
          >
            <el-table-column prop="receiveNo" align="center" label="接收编号"></el-table-column>
            <el-table-column prop="deviceName" align="center" label="设备标识"></el-table-column>
            <el-table-column prop="totalCount" width="100px" label="合计数量" align="center"></el-table-column>
            <el-table-column prop="acceptanceDate" label="验收日期" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button class="look-btn-pre" type="text" size="small">查看</el-button>
                <el-button class="edit-btn-pre" type="text" size="small" @click="handleEditReceive">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <div class="pagination-info">共 {{ total }} 条记录，{{ Math.ceil(total / pageSize) }} 页</div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div v-if="showDeviceSelection" class="modal-overlay">
      <DeviceSelection
        ref="deviceSelector"
        :title="'选择设备'"
        :devices="deviceList"
        :categories="categoryList"
        :initial-mode="selectionMode"
        :initial-selected="preSelectedDevices"
        :confirm-button-text="'确认选择'"
        @confirm="handleDeviceConfirm"
        @cancel="showDeviceSelection = false"
        @selection-change="handleSelectionChange"
        @mode-change="handleModeChange"
        @category-change="handleCategoryChange"
      />
    </div>

    <!-- 新增 -->
    <!-- <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="编辑设备信息"
      :visible.sync="isEditDialog"
      width="70%"
      :before-close="handleEditClose"
    >
      <div class="edit-main flex col">
        <div class="edit-main-head flex col">
          <div class="edit-tit flex fl-up-down-ct">
            <span class="padd-lt">基本信息</span>
          </div>

          <div class="out-basic-info padd-up-down-15">
            <div class="basic-info padd-15 bg">
              <el-row>
                <el-form
                  :model="baseForm"
                  status-icon
                  ref="ruleForm"
                  label-width="150px"
                  class="demo-ruleForm"
                >
                  <el-col :span="8">
                    <el-form-item label="接收单号">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value1"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备标识">
                      <el-input
                        @focus="openDeviceSelect"
                        type="text"
                        v-model="baseForm.value2"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="使用单位">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="计划项目号">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="单设备购置价格">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单设备其他使用费用">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单设备原值">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="合计数量">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="安装说明">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="结算日期">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="验收日期">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="说明事项">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>
          </div>

          <div class="edit-tit flex fl-up-down-ct">
            <span class="padd-lt">设备列表信息</span>
            <button type="button" class="maint-btn" @click="addDeviceBox">
              + 新增设备信息
            </button>
          </div>
          <div class="table-container padd-up-down-15 f1">
            <div class="device-list">
              <div v-if="devices.length === 0" class="empty-state">
                <i>📋</i>
                <h3>暂无设备信息</h3>
                <p>请点击上方的新增设备按钮添加设备信息</p>
              </div>

              <div
                v-else
                v-for="(device, index) in devices"
                :key="device.id"
                class="card bg"
              >
                <div class="card-header">
                  <div class="card-title">设备 {{ index + 1 }}</div>
                  <div class="btn-group">
                    <button
                      class="action-btn delete-btn"
                      @click="removeDevice(index)"
                    >
                      删除
                    </button>
                  </div>
                </div>
                <el-row>
                  <el-form
                    :model="baseForm"
                    status-icon
                    ref="ruleForm"
                    label-width="150px"
                    class="demo-ruleForm"
                  >
                    <el-col :span="8">
                      <el-form-item label="集团设备卡编号">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value1"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="固定资产编号">
                        <el-input
                          @focus="openDeviceSelect"
                          type="text"
                          v-model="baseForm.value2"
                        ></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="固定资产卡片号">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value3"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="生产厂家">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value3"
                        ></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="厂家编号">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value3"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="在用地点">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value3"
                        ></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="随机配件">
                        <el-button size="mini" @click="showPartsDialog = true"
                          >编辑</el-button
                        >
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="启用日期">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value3"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="随机材料">111</el-form-item>
                    </el-col>
                  </el-form>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div style="box-size: border-box" class="modal-footer flex">
          <el-button size="mini" @click="handleEditClose">取消</el-button>
          <el-button
            color="#1a4b8c"
            size="mini"
            @click="handleEditSave"
            type="primary"
            >保存</el-button
          >
          <el-button color="#1a4b8c" size="mini" type="primary">接收</el-button>
          <el-button color="#1a4b8c" size="mini" type="primary"
            >上传单据</el-button
          >
          <el-button color="#1a4b8c" size="mini" type="primary"
            >下载单据</el-button
          >
          <el-button color="#1a4b8c" size="mini" type="primary"
            >完成验收</el-button
          >
        </div>
      </div>
    </el-dialog>-->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="curMode>0?'编辑设备接收信息':'新增设备接收'"
      :visible.sync="isEditDialog"
      width="70%"
      :before-close="handleEditClose"
    >
      <div class="edit-main flex col">
        <el-tabs v-model="currDialogTab"  @tab-click="tabClickDialog">
          <el-tab-pane name="1" label="基本信息"></el-tab-pane>
          <el-tab-pane name="2" label="设备列表信息"></el-tab-pane>
        </el-tabs>
        <div class="out-basic-info padd-up-down-15" v-show="currDialogTab==1">
          <div class="basic-info padd-15 bg">
            <el-row>
              <el-form
                :model="baseForm"
                status-icon
                ref="ruleForm"
                label-width="150px"
                class="demo-ruleForm"
              >
                <el-col :span="12">
                  <el-form-item label="接收单号">
                    <el-input :disabled="true" type="text" v-model="baseForm.value1"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="设备标识">
                    <el-input @focus="openDeviceSelect" type="text" v-model="baseForm.value2"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="使用单位">
                    <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="计划项目号">
                    <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="单设备购置价格">
                    <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="单设备其他使用费用">
                    <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="单设备原值">
                    <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合计数量">
                    <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="安装说明">
                    <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结算日期">
                    <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="验收日期">
                    <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="说明事项">
                    <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
        </div>
        <template v-if="currDialogTab==2">
          <div class="edit-tit flex fl-up-down-ct padd-up-rt-15">
            <!-- <span class="padd-lt">设备列表信息</span> -->
            <span></span>
            <button type="button" class="maint-btn dash-btn-pre" @click="addDeviceBox">+ 新增设备信息</button>
          </div>
          <div class="device-list padd-up-down-15 f1">
            <div v-if="devices.length === 0" class="empty-state">
              <i>📋</i>
              <h3>暂无设备信息</h3>
              <p>请点击上方的新增设备按钮添加设备信息</p>
            </div>

            <div v-else v-for="(device, index) in devices" :key="device.id" class="card bg">
              <div class="card-header">
                <div class="card-title">设备 {{ index + 1 }}</div>
                <div class="btn-group">
                  <button class="action-btn delete-btn" @click="removeDevice(index)">删除</button>
                </div>
              </div>
              <el-row>
                <el-form
                  :model="baseForm"
                  status-icon
                  ref="ruleForm"
                  label-width="150px"
                  class="demo-ruleForm"
                >
                  <el-col :span="12">
                    <el-form-item label="集团设备卡编号">
                      <el-input :disabled="true" type="text" v-model="baseForm.value1"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="固定资产编号">
                      <el-input @focus="openDeviceSelect" type="text" v-model="baseForm.value2"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="固定资产卡片号">
                      <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="生产厂家">
                      <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="厂家编号">
                      <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="在用地点">
                      <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="启用日期">
                      <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24"></el-col>
                  <el-col :span="12">
                    <el-form-item label="随机配件">
                      <div class="flex" style="margin-right:0 !important">
                        <div class style="width:100%;display:inline;white-space: nowrap;;">
                          <template v-if="`${andomAccessories.length>0}`">
                            <div
                              v-for="(item,i) in andomAccessories.slice(0,5)"
                              :key="i"
                              class="tag"
                            >{{ item.name }}</div>
                            <div
                              v-if="andomAccessories.length > 5"
                              class="tag"
                              style="background-color: #f5f5f5; color: #999;"
                            >+{{ andomAccessories.length - 5 }}个</div>
                          </template>
                          <el-button
                            style="display: inline;"
                            size="mini"
                            @click="showPartsDialog = true"
                          >编辑</el-button>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24"></el-col>
                  <el-col :span="12">
                    <el-form-item label="随机材料">
                      <div class="rand-mtl all_ct">
                        <i class="el-icon-plus"></i>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>
          </div>
        </template>
        <div style="box-size: border-box" class="modal-footer flex">
          <el-button size="mini" @click="handleEditClose">取消</el-button>
          <el-button color="#1a4b8c" size="mini" @click="handleEditSave" type="primary">保存</el-button>
          <el-button color="#1a4b8c" size="mini" type="primary">接收</el-button>
          <el-button color="#1a4b8c" size="mini" type="primary">上传单据</el-button>
          <el-button color="#1a4b8c" size="mini" type="primary">下载单据</el-button>
          <el-button color="#1a4b8c" size="mini" type="primary">完成验收</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 随机配件对话框组件 -->
    <RandomPartsSelection
      :visible.sync="showPartsDialog"
      :initial-data="currentParts"
      @submit="handlePartsSubmit"
      @close="handlePartsClose"
    />
  </div>
</template>

<script>
import DeviceSelection from "../components/devicepts.vue";
import RandomPartsSelection from "../components/randpartsPts.vue";
export default {
  name: "EquipmentManagement",
  components: { DeviceSelection, RandomPartsSelection },
  data() {
    return {
      // 随机配件
      andomAccessories: [],

      curMode: 0,
      tabPosition: "top",
      showPartsDialog: false,
      currentParts: [
        {
          name: "电池",
          model: "5号电池",
          enableDate: "2023-12-07",
          quantity: 10,
          remarks: "高性能碱性电池"
        },
        {
          name: "保护码",
          model: "标准型",
          enableDate: "2023-11-15",
          quantity: 5,
          remarks: "设备安全保护"
        }
      ],
      deviceIdCounter: 0,
      devices: [],
      // todo 新增
      statusMapp: {
        1: "运行中",
        2: "维修中",
        3: "待机中",
        4: "关机中"
      },
      isEditDialog: false,
      baseForm: {
        value1: "",
        value2: "",
        value3: ""
      },
      realData: {
        baseForm: {
          value1: "11",
          value2: "22",
          value3: "33"
        },
        sonTableData: [
          {
            id: 1,
            data1: "s",
            datalist: "112",
            data3: "113",
            data4: "2023-11-10 00:00:00",
            data5: "2",
            data6: "1"
          },
          {
            id: 2,
            data1: "111",
            datalist: "111",
            data3: "111",
            data4: "2023-10-26 00:00:00",
            data5: "111",
            data6: "1"
          },
          {
            id: 3,
            data1: "11124",
            data2: "1231",
            data3: "124",
            data4: "2023-10-27 00:00:00",
            data5: "152",
            data6: "2"
          },
          {
            id: 4,
            data1: "111",
            datalist: "111",
            data3: "111",
            data4: "2023-10-26 00:00:00",
            data5: "111",
            data6: "1"
          },
          {
            id: 5,
            data1: "11124",
            data2: "1231",
            data3: "124",
            data4: "2023-10-27 00:00:00",
            data5: "152",
            data6: "2"
          }
        ],
        maintTableData: [
          {
            data1: "清洗",
            data2: "11",
            data3: "1",
            data4: ""
          },
          {
            data1: "清洗",
            data2: "11",
            data3: "",
            data4: ""
          }
        ]
      },

      // todo
      showDeviceSelection: false,
      selectionMode: "multiple",
      preSelectedDevices: ["EQ-2023-001"],
      selectedDevices: [],
      deviceList: [
        {
          id: "EQ-2023-001",
          name: "高精度示波器",
          category: "演示用设备",
          spec: "带宽: 1GHz, 采样率: 5GS/s, 通道: 4",
          status: "available"
        },
        {
          id: "EQ-2023-002",
          name: "工业机器人",
          category: "生产设备",
          spec: "负载: 20kg, 重复定位精度: ±0.05mm",
          status: "inuse",
          disabled: true
        },
        {
          id: "EQ-2023-003",
          name: "服务器集群",
          category: "x86服务器",
          spec: "CPU: 2×Xeon Gold, 内存: 256GB, 存储: 4TB SSD",
          status: "available"
        },
        {
          id: "EQ-2023-004",
          name: "恒温恒湿试验箱",
          category: "仪器及试验设备",
          spec: "温度范围: -40℃~150℃, 湿度范围: 20%~98%",
          status: "maintenance"
        },
        {
          id: "EQ-2023-005",
          name: "电动叉车",
          category: "运输工具",
          spec: "载重: 2.5吨, 起升高度: 3.5米, 电池: 48V/600Ah",
          status: "available"
        }
      ],
      categoryList: [
        { id: "all", name: "全部设备", icon: "fas fa-th-list" },
        { id: "demo", name: "演示用设备", icon: "fas fa-tv" },
        { id: "production", name: "生产设备", icon: "fas fa-industry" },
        { id: "electronic", name: "电子设备", icon: "fas fa-laptop" },
        { id: "server", name: "x86服务器", icon: "fas fa-server" },
        { id: "server1", name: "x86服务器1", icon: "fas fa-server" },
        { id: "server2", name: "x86服务器2", icon: "fas fa-server" },
        { id: "server3", name: "x86服务器3", icon: "fas fa-server" },
        { id: "server4", name: "x86服务器4", icon: "fas fa-server" },
        { id: "server5", name: "x86服务器5", icon: "fas fa-server" },
        { id: "server6", name: "x86服务器6", icon: "fas fa-server" },
        { id: "server7", name: "x86服务器7", icon: "fas fa-server" },
        { id: "server8", name: "x86服务器8", icon: "fas fa-server" },
        { id: "server9", name: "x86服务器9", icon: "fas fa-server" },
        { id: "server10", name: "x86服务器10", icon: "fas fa-server" },
        { id: "server11", name: "x86服务器11", icon: "fas fa-server" },
        { id: "server12", name: "x86服务器12", icon: "fas fa-server" },
        { id: "server13", name: "x86服务器13", icon: "fas fa-server" },
        { id: "server14", name: "x86服务器14", icon: "fas fa-server" },
        { id: "server15", name: "x86服务器15", icon: "fas fa-server" },
        { id: "server16", name: "x86服务器16", icon: "fas fa-server" }
      ],
      searchKeyword: "",
      filterStatus: "",
      dateRange: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 479,
      tableData: [
        {
          receiveNo: "JS20180522005",
          deviceName: "佳兆多功能数码综合机-2204AD",
          totalCount: 1,
          acceptanceDate: "2018-05-22 00:00:00",
          status: "完成验收"
        },
        {
          receiveNo: "JS201405310010",
          deviceName: "排龙池",
          totalCount: 301,
          acceptanceDate: "2014-05-31 00:00:00",
          status: "完成验收"
        },
        {
          receiveNo: "JS201405310011",
          deviceName: "广区型电",
          totalCount: 1,
          acceptanceDate: "2014-05-31 00:00:00",
          status: "完成验收"
        },
        {
          receiveNo: "JS201405310012",
          deviceName: "3#4#清水池",
          totalCount: 2805,
          acceptanceDate: "2014-05-31 00:00:00",
          status: "完成验收"
        },
        {
          receiveNo: "JS200904300005",
          deviceName: "铝合金板棒-6米",
          totalCount: 1,
          acceptanceDate: "2009-04-30 00:00:00",
          status: "完成验收"
        }
      ],
      currDialogTab: "1"
    };
  },
  methods: {
    tabClickDialog(e) {
      // this.currDialogTab = e._props.label;
      console.log("tabClickDialog-e", this.currDialogTab);
    },
    removeDevice(e) {
      this.devices.splice(e, 1);
    },
    // 处理配件提交
    handlePartsSubmit(partsData) {
      console.log("提交的配件数据:", partsData);
      this.currentParts = partsData;
      this.andomAccessories = partsData;
      this.$message.success("配件设置成功");
    },

    // 处理对话框关闭
    handlePartsClose() {
      console.log("配件对话框已关闭");
    },
    addDeviceBox() {
      //

      this.devices.push({
        id: ++this.deviceIdCounter,
        deviceCardNo: "",
        manufacturer: "",
        assemblyDate: "",
        randomPart1: "",
        randomPart2: "",
        fixedAssetNo: "",
        manufacturerNo: "",
        assetCardNo: "",
        location: ""
      });
      this.$nextTick(() => {
        const container = document.querySelector(".device-list");
        console.log("container", container);
        if (container) {
          container.scrollTo(0, 99999);
        }
      });
    },

    handleEditSave() {
      console.log("submit");
    },
    openDeviceSelect() {
      console.log("1111");
      this.showDeviceSelection = true;
    },
    // todo 新增
    handleEditClose() {
      console.log("关闭编辑窗口");
      this.isEditDialog = false;
    },
    // todo 新增
    handleDeviceConfirm(result) {
      console.log("设备选择确认:", result);
      this.selectedDevices = result.devices;
      this.selectedDevices = result.devices.map(device => device.name);
      console.log(" this.selectedDevices ", this.selectedDevices);
      this.baseForm.value2 = this.selectedDevices.join(",");
      this.showDeviceSelection = false;

      // 可以在这里调用API保存选择结果
    },

    handleSelectionChange(deviceIds) {
      console.log("选择变化:", deviceIds);
    },

    handleModeChange(mode) {
      console.log("模式变化:", mode);
      this.selectionMode = mode;
    },

    handleCategoryChange(categoryId) {
      console.log("分类变化:", categoryId);
    },

    // 通过ref调用子组件方法
    clearSelection() {
      this.$refs.deviceSelector.clearSelection();
    },

    setSelection(deviceIds) {
      this.$refs.deviceSelector.setSelection(deviceIds);
    },
    handleSearch() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message.success("搜索完成");
      }, 500);
    },
    handleAddReceive() {
      this.curMode = 0;
      // this.$message.success("点击新增接收");
      // this.showDeviceSelection = true;
      this.isEditDialog = true;
    },
    handleEditReceive() {
      this.curMode = 1;
      this.isEditDialog = true;
    },
    handleClose(e) {
      this.isDialog1 = false;
    },
    handleView(row) {
      this.$message.info(`查看 ${row.receiveNo}`);
    },
    handleEdit(row) {
      this.$message.info(`编辑 ${row.receiveNo}`);
    },
    handleExport() {
      this.$message.success("导出数据成功");
    },
    handleRefresh() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message.success("数据已刷新");
      }, 800);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    },
    loadData() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>

<style scoped lang="scss">
.equipment-container {
  height: 100%;
  width: 100%;
  padding: 15px;
  // width: 100%;
  box-sizing: border-box;
}

/* 头部区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 24px;
  // padding: 0 8px;
}

.header-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2d3d;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-title i {
  color: #409eff;
  font-size: 28px;
}

/* 搜索和操作区域 */
.toolbar {
  background: white;
  padding: 20px;
  // border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  // margin-bottom: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-group {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 300px;
}

.search-input {
  flex: 1;
  max-width: 400px;
}

.filter-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 表格容器 */
.table-container {
  background: white;
  // border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: auto;
  min-height: 0;
}
.device-list {
  background: white;
  // border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: auto;
  min-height: 0;
}
.table-header {
  padding: 20px 24px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2d3d;
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 自定义表格样式 */
.custom-table {
  border: none;
}

.custom-table .el-table__header {
  // background: #f8f9fa;
}

.custom-table .el-table__header th {
  // background: #f8f9fa;
  color: #606266;
  font-weight: 600;
  border-bottom: 2px solid #eaeaea;
}

.custom-table .el-table__body tr:hover td {
  background: #f5f7fa !important;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-completed {
  background: #f0f9ff;
  color: #1890ff;
  border: 1px solid #d1e9ff;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.view-btn,
.edit-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.view-btn {
  background: #f0f9ff;
  color: #1890ff;
  border: 1px solid #d1e9ff;
}

.view-btn:hover {
  background: #1890ff;
  color: white;
}

.edit-btn {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.edit-btn:hover {
  background: #52c41a;
  color: white;
}

/* 分页区域 */
.pagination-container {
  padding: 20px 24px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafbfc;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  color: #606266;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .equipment-container {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-group {
    min-width: auto;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
// 新增
.edit-main {
  padding: 15px 15px 20px;
  box-sizing: border-box;
  max-height: calc(80vh - 35px);
  // border: 1px solid red;
  .edit-tit {
    // border-left: 4px solid #1a4b8c;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    // margin-bottom: 15px;
    padding-bottom: 15px;
  }
  .basic-info {
    border: 1px solid #ebeef5;
  }
  .edit-main-head {
    // max-height: calc(80vh - 60px);
    // overflow-y:auto
    min-height: 0;
  }
}
.abmain-maint-tle {
  overflow-y: auto;
  box-sizing: border-box;
}
.bg {
  // background-color: #f8f9fa;
}
.modal-footer {
  padding: 15px 20px;
  // height: 60px;
  // background-color: #f8f9fa;
  justify-content: flex-end;
  // gap: 10px;
  border-top: 1px solid #eaeaea;
  margin: 0 -15px;
  box-sizing: border-box;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #7f8c8d;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #bdc3c7;
}
.card {
  // background: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 15px;
  // margin-bottom: 10px;
  box-sizing: border-box;
  // border-left: 4px solid #3498db;
  animation: fadeIn 0.5s ease;
  min-height: 352px;
  margin-bottom: 15px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.card-title {
  font-size: 16px;
  color: #2c3e50;
  font-weight: 300;
}
.btn-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover {
  background-color: #c0392b;
}
.edit-tit {
  // border-left: 4px solid #1a4b8c;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.maint-btn {
  background: none;
  border: 1px dashed #1a4b8c;
  color: #1a4b8c;
  cursor: pointer;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}
.tag {
  display: inline;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  background-color: #f0f0f0;
  color: #5933e0;
  font-size: 14px;
  cursor: default;
  transition: all 0.2s ease;
  margin-right: 10px;
}
.tag span {
  padding-right: 7px;
}
.rand-mtl {
  height: 100px;
  width: 100px;
  border: 1px solid #aaa;
  box-sizing: border-box;
  cursor: pointer;
}
</style>